{extend name="common/layout" /}
{block name="main"}
<div class="el-breadcrumb">
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item>房屋管理</el-breadcrumb-item>
    <el-breadcrumb-item>租客档案</el-breadcrumb-item>
  </el-breadcrumb>
</div>

<el-table :data="tableData" stripe border style="width: 100%">
  <el-table-column prop="property_name" label="房产" fixed width="85">
  </el-table-column>
  <el-table-column prop="number_name" label="房号" fixed width="85">
  </el-table-column>
  <el-table-column prop="name" label="姓名" fixed width="80">
  </el-table-column>
  <el-table-column prop="sex_name" label="性别" width="60">
  </el-table-column>
  <el-table-column prop="age" label="年龄" width="60">
  </el-table-column>
  <el-table-column prop="id_card_number" label="身份证号码" width="150">
  </el-table-column>
  <el-table-column prop="native_place" label="户口所在地" width="120">
  </el-table-column>
  <el-table-column prop="work_units" label="现工作单位" width="160">
  </el-table-column>
  <el-table-column prop="phone" label="联系电话" width="100">
  </el-table-column>
  <el-table-column prop="checkin_time" label="入住日期" width="90">
  </el-table-column>
  <el-table-column prop="leave_time" label="离开日期" width="90">
  </el-table-column>
  <el-table-column label="操作" key="slot">
    <template #default="scope">
      <el-button size="mini" type="warning" @click="handleMsg(scope.row)">照片</el-button>
      <el-button size="mini" type="info" @click="handleEdit(scope.row)" icon="el-icon-edit">编辑</el-button>
    </template>
  </el-table-column>
</el-table>
<div style="margin-top: 15px;">
  <el-pagination background layout="total, sizes, prev, pager, next" :total="pageTotal" :page-sizes="[10, 20, 50]"
    :page-size="10" v-model::current-page="currentPage" @current-change="changeTable" @size-change="handleSizeChange">
  </el-pagination>
</div>

<el-dialog :title="titleName" v-model="dialogFormVisible">
  <el-form :model="formData" :rules="rules" ref="formData">
    <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
      <el-input v-model="formData.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="入住日期" :label-width="formLabelWidth" prop="checkin_time">
      <el-date-picker type="date" v-model="formData.checkin_time" value-format="YYYY-MM-DD" placeholder="选择日期"
        style="width: 100%;">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
      <el-select v-model="formData.sex" placeholder="请选择">
        <el-option label="女" value="F"></el-option>
        <el-option label="男" value="M"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phone">
      <el-input v-model.number="formData.phone" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="身份证号码" :label-width="formLabelWidth" prop="id_card_number">
      <el-input v-model="formData.id_card_number" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="籍贯" :label-width="formLabelWidth" prop="native_place">
      <el-input v-model="formData.native_place" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="工作单位" :label-width="formLabelWidth" prop="work_units">
      <el-input v-model="formData.work_units" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSave()">确 定</el-button>
    </span>
  </template>
</el-dialog>

<el-dialog :title="titleName" v-model="msgVisible">
  <el-upload class="upload-demo" action="upload" :headers="upheaders" multiple :file-list="fileList" :data="uploadData"
    :on-remove="handleRemove" :on-success="uploadSuccess" accept=".png, .jpg, .jpeg">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
  <span v-for="item in fileList" :key="item.id">
    <el-image style="width: 260px; height: 260px" :src="item.url" fit="contain"></el-image>
  </span>
</el-dialog>

{/block}

{block name="script"}
<script>
  const data = {
    tableData: [],
    // 分页
    pageTotal: 0,
    currentPage: 1,
    currentLimit: 10,
    dialogFormVisible: false,
    formLabelWidth: '120px',
    formData: {},
    rules: {
      name: [{ required: true, message: '请输入', trigger: 'blur' }],
      checkin_time: [{ required: true, message: '请选择', trigger: 'change' }],
    },
    titleName: '',
    // 照片
    msgVisible: false,
    upheaders: { 'X-CSRF-TOKEN': '{$layout_token}' },
    fileList: [],
    uploadData: {},
    fileList: [],
    tenantId: ''
  };
  function f() {
    return {
      init: function () {
        this.queryTable();
      },
      queryTable: function (params) {
        let that = this;
        axiosGet("{:url('query')}", params).then(response => {
          if (response.code == 1) {
            that.tableData = response.data;
            that.pageTotal = response.count;
          } else {
            that.$message.error('系统出错了!!!');
          }
        });
      },
      // 分页-选择(下一页)查询
      changeTable(val) {
        let params = {
          'house_property_id': this.houseDef,
          'page': val,
          'limit': this.currentLimit,
        }
        this.queryTable(params);
        this.currentPage = val
      },
      // 分页-切换每页条数查询
      handleSizeChange(val) {
        let params = {
          'house_property_id': this.houseDef,
          'page': this.currentPage,
          'limit': val,
        }
        this.queryTable(params);
      },
      handleEdit(row) {
        this.titleName = row.property_name + '-' + row.number_name
        this.dialogFormVisible = true
        this.formData = JSON.parse(JSON.stringify(row));
        if (this.$refs['formData']) {
          this.$refs['formData'].resetFields();
        }
      },
      handleSave() {
        let that = this;
        let validation = false;
        this.$refs['formData'].validate((valid) => {
          if (valid) {
            validation = true;
          }
        });
        if (validation) {
          axiosPost("{:url('save')}", this.formData).then(response => {
            if (response.state == 'success') {
              that.$message.success(response.msg)
              that.dialogFormVisible = false
              that.queryTable({ 'page': this.currentPage });
            } else {
              that.$message({
                message: response.msg, type: response.state
              });
            }
          });
        }
      },

      // 照片开窗
      handleMsg(row) {
        this.tenantId = row.id
        this.queryPhoto(row.id)
        this.titleName = row.property_name + '-' + row.number_name + '-' + row.name
        this.uploadData = { way: row.id }
        this.fileList = []
        this.msgVisible = true
      },
      queryPhoto(id) {
        axiosGet("{:url('queryPhoto')}", { id: id }).then(response => {
          if (response.code == 1) {
            this.fileList = response.data;
          } else {
            that.$message.error('系统出错了!!!');
          }
        });
      },
      uploadSuccess() {
        this.queryPhoto(this.tenantId)
      },
      handleRemove(file) {
        axiosPost("{:url('deletePhoto')}", file).then(response => {
          if (response.state == 'success') {
            this.queryPhoto(this.tenantId)
          } else {
            this.$message({
              message: response.msg, type: response.state
            });
          }
        });
      }
    }
  }
</script>
{/block}